<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>订单管理</el-breadcrumb-item>
				<el-breadcrumb-item>查看发货</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="content-box">
			<el-tabs v-model="activeName" type="card">
				<el-tab-pane label="基本信息" name="info">
					<div class="tab-content">
						<el-row class="mab-20">
							<el-table :data="model.deliveryGoods" border class="table-form">
								<el-table-column label="配送商品" min-width="220">
									<template slot-scope="scope">
										<el-image class="pic" fit="contain" :src="$api.loadFile(scope.row.orderGoods.imgUrl)">
											<div slot="error" class="image-slot">
												<i class="el-icon-picture-outline"></i>
											</div>
										</el-image>
										<h4>{{scope.row.orderGoods.goodsTitle}}</h4>
										<span class="date">
											{{scope.row.orderGoods.goodsNo}}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="orderGoods.skuText" label="规格" min-width="120" show-overflow-tooltip></el-table-column>
								<el-table-column prop="orderGoods.realPrice" label="单价" width="80"></el-table-column>
								<el-table-column prop="orderGoods.quantity" label="数量" width="80"></el-table-column>
							</el-table>
						</el-row>
						<el-card shadow="hover">
							<div slot="header" class="clearfix">
								<i class="el-icon-user"></i>
								<span>收货信息</span>
							</div>
							<el-form :label-position="labelPosition" label-width="120px">
								<el-form-item label="订单号">
									{{model.orderNo}}
								</el-form-item>
								<el-form-item label="收件人">
									{{model.acceptName}} {{model.mobile}} {{model.telPhone}}
								</el-form-item>
								<el-form-item label="配送地址">
									{{model.address}}
								</el-form-item>
								<el-form-item label="配送费用">
									{{model.freight}} 元
								</el-form-item>
								<el-form-item label="单据备注" v-if="model.remark">
									{{model.remark}}
								</el-form-item>
							</el-form>
						</el-card>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	export default {
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				model: {
					id: 0,
					orderId: null,
					orderNo: null,
					acceptName: null,
					telPhone: null,
					mobile: null,
					provinceId: null,
					cityId: null,
					areaId: null,
					address: null,
					freight: null,
					expressId: null,
					expressCode: null,
					remark: null,
					addTime: null,
					shopExpress: [],
					deliveryGoods: []
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				if (!_this.id) {
					_this.$alert('参数有误，找不到发货信息。', '错误提示', {
						confirmButtonText: '确定',
						callback: action => {
							_this.$common.linkUrl('/order/delivery/list');
						}
					});
				} else {
					_this.$api.request({
						url: '/merchant/order/delivery/' + _this.id,
						loading: true,
						success(res) {
							//赋值给model
							Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
						},
						error(err) {
							_parent.$alert('参数有误，找不到发货信息。', '错误提示', {
								confirmButtonText: '确定',
								callback: action => {
									_this.$common.linkUrl('/order/delivery/list');
								}
							});
						}
					});
				}
			},
		},
		created() {
			this.initData();
		}
	}
</script>